<template>
  <div>
    <div class="top-operate">
      <el-button @click="$router.go(-1)">返回</el-button>
      <div style="background-color: #F2F2F2">
        <span style="color: blue; font-size: 18px; margin-left: 10px">合计业绩数据为一级合伙人</span>
        <span style="font-size: 18px;">{{levelOnePartnerName}}</span>
        <span style="color: blue; font-size: 18px;">的所有下级合伙人总和</span>
        <div style="margin-left: 10px; margin-top: 10px">
          <el-row>
            <el-col :span="4"><div class="grid-content bg-purple">
              <span>合计业绩(元)</span>
              <br/><span style="font-size: 28px">{{ partnerIncome.totalOrderAmount }}</span>
            </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light">
              <span>合计提成(元)</span>
              <br/><span style="font-size: 28px">{{ partnerIncome.totalTwoShareOrderAmount }}</span>
            </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
              <span>新增订单(笔)</span>
              <br/><span style="font-size: 28px">{{ partnerIncome.totalOrderNum }}</span>
            </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light">
              <span>新增招募员(人)</span>
              <br/><span style="font-size: 28px">{{ partnerIncome.totalRecruiterNum }}</span>
            </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
              <span>新增云店(个)</span>
              <br/><span style="font-size: 28px">{{ partnerIncome.totalMemberNum }}</span>
            </div></el-col>
          </el-row>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="entityList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
          <el-table-column label="合伙人名称" prop="partnerName" align="center"></el-table-column>
          <el-table-column label="招募员数(人)" prop="twoRecruiterNum" align="center"></el-table-column>
          <el-table-column label="云店数(个)" prop="twoMemberNum" align="center"></el-table-column>
          <el-table-column label="订单数（笔）" prop="twoOrderNum" align="center"></el-table-column>
          <el-table-column label="业绩（元）" prop="twoOrderAmount" align="center"></el-table-column>
          <el-table-column label="提成（元）" prop="twoShareOrderAmount" align="center"></el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="entityListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="entityListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>


<style scoped>

</style>

<script>
  import { pagingPartner, statPartnerIncome } from '@/api/user/enterprisePartner'
  export default {
    data() {
      return {
        levelOnePartnerName: '',
        entityList: [],
        total: null,
        listLoading: true,
        entityListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          parentId: '',
          partnerType: '2',
          commissionType: 2
        },
        partnerIncome: {
          totalOrderAmount: 0,
          totalShareOrderAmount: 0,
          totalOrderNum: 0,
          totalTwoShareOrderAmount: 0,
          totalRecruiterNum: 0,
          totalMemberNum: 0
        },
        entity: {
          totalOrderAmount: 0,
          totalShareOrderAmount: 0,
          totalOrderNum: 0,
          totalRecruiterNum: 0,
          totalMemberNum: 0
        }
      }
    },

    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      this.levelOnePartnerName = queryParams.partnerName
      this.entityListQuery.parentId = queryParams.partnerId
      if (!this.entityListQuery.parentId) {
        return
      }
      this.initEntityList()
    },
    methods: {
      close() {
        this.dialogFormVisible = false
      },
      handleDialogClose() {
        this.dialogFormVisible = false
      },
      initEntityList() {
        this.listLoading = true
        const entity = {
          enterpriseId: this.getEnterpriseId(),
          parentId: this.entityListQuery.parentId,
          partnerType: '1'
        }
        statPartnerIncome(entity).then(response => {
          if (response.isError) return
          this.partnerIncome = response.data
        })
        pagingPartner(this.entityListQuery).then(response => {
          this.entityList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.entityListQuery.size = val
        this.initEntityList()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.entityListQuery.currentPage = val
        this.initEntityList()
      }
    }
  }

</script>
